<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <div class="topicname">专题</div>
    </van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        @click="target(item.id)"
        class="item"
        v-for="(item, index) in list"
        :key="index"
      >
        <img :src="item.scene_pic_url" alt="" />
        <h3>{{ item.title }}</h3>
        <h4>{{ item.subtitle }}</h4>
        <p>{{ item.price_info }}元起</p>
      </div>
    </van-list>
  </div>
</template>

<script>
import { listaction } from "@/api/topic/index";

export default {
  components: {},

  data() {
    return {
      list: [],
      start: 1,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },

  created() {
    listaction({ page: 1 }).then((res) => {
      //   console.log(res);
      this.list.push(...res.data);
    });
  },

  mounted() {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      listaction({ page: this.start }).then((res) => {
        console.log(res);
        this.list.push(...res.data);
        this.loading = false;
        if (this.start == res.total) {
          this.finished = true;
        }
        this.start++;
      });
    },
    target(num) {
      console.log(num);
      this.$router.push({
        name: "topicdetail",
        params: {
          id: num,
        },
      });
    },
    onRefresh() {},
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.item {
  width: 375px;
  height: 336px;
  background-color: #fff;
  margin-bottom: 20px;
  img {
    width: 375px;
    height: 208px;
  }
  h3 {
    margin: 10px auto 20px;
    font-size: 20px;
    font-weight: 300;
    width: 355px;
    padding: 0 10px;
  }
  h4 {
    width: 355px;
    font-weight: 300;
    font-size: 14px;
    color: #999;
    padding: 0 10px;
  }
  p {
    color: red;
    font-size: 14px;
    margin: 10px auto;
    width: 355px;
    padding: 0 10px;
  }
}
.van-list {
  margin-bottom: 60px;
}
.van-nav-bar{
  text-align: left;
}
.topicname{
  width: 375px;
  height: 46px;
  background-color: #fff;
  font-size: 16px;
  line-height: 46px;
  text-align: left;
  text-indent: 20px;
}
</style>